<template>
  <div class="pwdback">
    <head_><h1>注册</h1></head_>

    <div class="inp">
      <label for="phone">手机号</label>
      <input
              type="text"
              placeholder="请输入手机号"
              id="phone"
              v-model="phoneNum"
              @blur="changepin"
      />
    </div>

    <div class="pin">
      <label for="pin">验证码</label>
      <input
              v-model="pin"
              type="text"
              placeholder="请输入验证码"
              id="pin"
      />
      <button
              :class="[pincolor == true ? 'button_active' : '']"
              id="yzm"
              @click="getpin"
              :disabled="bool"
      >
        {{ pintext }}
      </button>
    </div>

    <div class="inp">
      <label for="newpwd">新密码</label>
      <input
              v-model="password"
              :type="flas ? tests : pass"
              placeholder="请输入密码"
              id="newpwd"
      />
      <van-icon
              @click="eye_active"
              :class="flas ? 'eye_active' : ''"
              name="eye-o"
              size="0.36rem"
      />
    </div>

    <div class="inp">
      <label for="sure">确认</label>
      <input
              :type="flas2 ? tests : pass"
              v-model="surepw"
              placeholder="再次输入密码"
              id="sure"
      />
      <van-icon
              @click="eye_active2"
              :class="flas2 ? 'eye_active' : ''"
              name="eye-o"
              size="0.36rem"
      />
    </div>



    <div class="submit">
      <button
              @click="submit"
              :disabled="submitdisplay"
              :class="[submitcolor == true ? 'submit_active' : '']"
      >
        提交
      </button>
    </div>
  </div>
</template>

<script>
  import head_ from "../jingtai_/header";
  import {getCode,register} from '../../request/login_register/login_register'
  export default {
    props: {},
    data() {
      return {
        phoneNum: '',
        password:'',
        pin: '',
        pw: "",
        yz:'',
        surepw: "",
        pintext: "获取验证码",
        pincolor: false,
        timerid: null,
        time: 0,
        flas: false,
        pass: "password",
        tests: "text",
        flas2: false,
        submitdisplay: true,
        submitcolor: false,
        regphone: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
        regpw: /^\w{6,12}$/,
        bool:true
      };
    },
    methods: {
      changepin() {
        this.pincolor = true;
        this.bool = false
      },
      getpin() {
        this.$http.get("/common/sendMsg?phoneNum="+this.phoneNum).then(resp=>{
          console.log(resp)
          this.yz=resp.data.data;
          // if (resp.data.code===200){
          this.$message.success('成功发送验证码');
          clearInterval(this.timerid);
          this.time = 60;
          this.bool=true;
          // this.pintext = `重新获取(${this.time})`;
          this.pintext = `${this.time}`;
          this.timerid = setInterval(() => {
            this.time--;
            this.pintext = `${this.time}`;
            if (this.time <= 0) {
              this.time = 60;
              clearInterval(this.timerid);
              this.pintext = "获取验证码";
              this.bool=false;
            }
          }, 1000);
        })
      },
      eye_active() {
        this.flas = !this.flas;
      },
      eye_active2() {
        this.flas2 = !this.flas2;
      },
      //注册按钮
      submit() {
          if(this.password==this.surepw) {
              this.$http.post("/client/api/register/" + this.password + "/" + this.phoneNum + "/" +this.yz).then(rsp => {
                if (rsp.data.code === 200) {
                  this.$router.push('/login');
                  this.$message.success('注册成功');
                }else {
                  this.$message.error(rsp.data.msg);
                }
              })
          }
          else {
            this.$message.error('两次密码不一样');
          }
      }
    },
    updated() {
      if (
              this.phoneNum != "" &&
              this.pin != "" &&
              this.password != "" &&
              this.surepw != ""
      ) {
        this.submitdisplay = false;
        this.submitcolor = true;
      } else {
        this.submitcolor = false;
        this.submitdisplay = true;
      }
    },

    components: { head_ },
  };
</script>

<style scoped lang="less">
  .pwdback {
    padding: 0 0.24rem;
    .title {
      display: flex;
      align-items: center;
      height: 0.88rem;
    }
    span {
      flex: 1;
      text-align: center;
      font-size: 0.34rem;
      font-weight: bolder;
    }
    .inp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.29rem;
      position: relative;
      label {
        font-size: 0.26rem;
        font-weight: bolder;
      }
      input {
        width: 5.48rem;
        height: 0.66rem;
        font-size: 0.22rem;
        padding-left: 0.19rem;
        border: 2px solid #e4e4e4;
        border-radius: 0.04rem;
        &::placeholder {
          color: #999;
        }
      }
      .van-icon-eye-o {
        position: absolute;
        top: 0.2rem;
        right: 0.19rem;
      }
      .eye_active {
        color: #2094ff;
      }
    }

    .pin {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.29rem;
      label {
        font-size: 0.26rem;
        font-weight: bolder;
      }
      input {
        width: 2.98rem;
        height: 0.66rem;
        font-size: 0.22rem;
        padding-left: 0.19rem;
        margin-left: 0.2rem;
        border: 2px solid #e4e4e4;
        border-radius: 0.04rem;
        &::placeholder {
          color: #999;
        }
      }
      button {
        width: 2rem;
        height: 0.66rem;
        font-size: 0.22rem;
        color: #999;
        background-color: #f2f2f2;
        text-align: center;
        line-height: 0.66rem;
        outline: none;
        border: none;
      }
      .button_active {
        background: #43a5ff;
        color: #fff;
      }
    }
    .submit {
      margin-top: 1.29rem;
      text-align: center;
      button {
        width: 5rem;
        height: 1rem;
        color: #999;
        background: #f2f2f2;
        font-size: 0.34rem;
        text-align: center;
        line-height: 1rem;
        border: none;
        outline: none;
      }
      .submit_active {
        background: #43a5ff;
        color: #fff;
      }
    }
  }
</style>
